﻿<template>
    <div class="container">
      <div class="left-sidebar">
        <!-- 左侧组件列表 -->
        <div v-for="component in components" :key="component.id" class="left-component" draggable="true" @dragstart="handleDragStart(component)">
          {{ component.label }}
        </div>
      </div>
  
      <div class="drag-container" @drop="handleDrop" @dragover.prevent>
        <!-- 中间拖拽组件区域 -->
        <div v-for="(component, index) in draggedComponents" :key="component.id" class="dragged-component">
          <el-form :model="component.form">
            <el-form-item v-for="field in component.fields" :key="field.prop" :label="field.label">
              <el-input v-if="field.type === 'input'" v-model="component.form[field.prop]"></el-input>
              <el-select v-else-if="field.type === 'select'" v-model="component.form[field.prop]" :options="field.options"></el-select>
              <!-- 其他表单项类型 -->
            </el-form-item>
            <div class="component-actions">
              <span class="edit-action" @click="editComponent(index)">编辑</span>
              <span class="delete-action" @click="deleteComponent(index)">删除</span>
              <span class="preview-action" @click="previewComponent(component)">预览</span>
            </div>
          </el-form>
        </div>
        <div v-if="draggedComponents.length === 0" class="empty-tip">拖拽组件到此区域</div>
      </div>
  
      <div class="right-sidebar">
        <!-- 右侧表单属性配置 -->
        <div v-if="selectedComponent !== null">
          <h3>{{ selectedComponent.label }}</h3>
          <el-form :model="selectedComponent.formConfig">
            <el-form-item v-for="config in selectedComponent.formConfig" :key="config.prop" :label="config.label">
              <el-input v-model="config.value"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  export default {

    data() {
      return {
        components: [
          {
            id: 1,
            label: '输入框',
            fields: [
              { label: '名称', prop: 'name', type: 'input' },
              { label: '占位符', prop: 'placeholder', type: 'input' }
            ],
            form: {
              name: '',
              placeholder: ''
            },
            formConfig: [
              { label: '名称', prop: 'name', value: '' },
              { label: '占位符', prop: 'placeholder', value: '' }
            ]
          },
          {
            id: 2,
            label: '下拉框',
            fields: [
              { label: '名称', prop: 'name', type: 'input' },
              { label: '选项', prop: 'options', type: 'select', options: [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }] }
            ],
            form: {
              name: '',
              options: ''
            },
            formConfig: [
              { label: '名称', prop: 'name', value: '' },
              { label: '选项', prop: 'options', value: '' }
            ]
          }
        ],
        draggedComponents: [], // 中间拖拽的组件列表
        selectedComponent: null // 当前选中的组件
      };
    },
    methods: {
      handleDragStart(component) {
        // 在拖拽开始时设置数据传递
        event.dataTransfer.setData('text/plain', JSON.stringify(component));
      },
      handleDrop(event) {
        // 在拖拽放置时获取数据并添加到中间区域
        const component = JSON.parse(event.dataTransfer.getData('text/plain'));
        this.draggedComponents.push(component);
      },
      editComponent(index) {
        // 编辑指定位置的中间区域组件属性
        this.selectedComponent = this.draggedComponents[index];
      },
      deleteComponent(index) {
        // 删除指定位置的中间区域组件
        this.draggedComponents.splice(index, 1);
      },
      previewComponent(component) {
        // 预览指定中间区域的组件及其配置
        console.log(component);
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
  }
  
  .left-sidebar {
    flex: 1;
    padding: 20px;
  }
  
  .left-component {
    margin-bottom: 10px;
    cursor: move;
  }
  
  .drag-container {
    flex: 1;
    border: 1px solid #eaeaea;
    min-height: 300px;
    padding: 20px;
  }
  
  .dragged-component {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  
  .component-actions {
    display: flex;
  }
  
  .edit-action,
  .delete-action,
  .preview-action {
    cursor: pointer;
    margin-left: 10px;
  }
  
  .empty-tip {
    text-align: center;
  }
  
  .right-sidebar {
    flex: 1;
    padding: 20px;
  }
  </style>